<template>
    <div>
        <el-dialog title="新增人员" class="noselect" v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}" :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm " >
              <!--<div class="text-left" style="margin-left:30px;font-size: 15px;">人员信息：</div>-->
                <el-form-item label=" " prop="name" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]">
                    <el-input placeholder="请输入姓名" v-model="modelForm.name" size="medium" :maxLength="11">
                            <template slot="prepend">
                                <el-tooltip placement="top" content="请填写姓名">
                                    <el-button tabIndex="-1">姓名</el-button>
                                </el-tooltip>
                            </template>
                    </el-input>
                </el-form-item>
                <el-form-item label=" ">
                        <div class="el-from-item_title">性别</div>
                        <div class="el-from-item_content text-left" style="margin-left:50px">
                        <el-radio-group v-model="modelForm.gender">
                            <el-radio label="MAN" value="MAN">男</el-radio>
                            <el-radio label="WOMAN" value="WOMAN">女</el-radio>
                        </el-radio-group>
                        </div>
                </el-form-item>
                <el-form-item label=" " prop="districtId" :rules="[]">
                  <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                    <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
                    <el-cascader placeholder="请选择所属区域" class="el-cascader-margin w-100p" size="medium"
                                 :options="treeData"
                                 :show-all-levels="false" v-model="downCategeryId" @change="getDepart"
                                 change-on-select >
                    </el-cascader>
                  </div>
                </el-form-item>
                <el-form-item label=" " prop="phone" :rules="[{ required: true, message: '手机号不能为空', trigger: 'blur' },rules.phone]">
                    <el-input placeholder="请输入手机号码" v-model="modelForm.phone" size="medium" :maxLength="11">
                            <template slot="prepend">
                                <el-tooltip placement="top" content="请填写手机号码">
                                    <el-button tabIndex="-1">手机号码</el-button>
                                </el-tooltip>
                            </template>
                    </el-input>
                </el-form-item>
              <!--<div class="text-left" style="margin-left:30px;font-size: 15px;">岗位信息：</div>-->
              <el-form-item label=" " prop="departmentId" :rules="[{ required: true, message: '所属部门不能为空', trigger: 'blur' }]">
                <div class="el-input el-input-group el-input-group--prepend">
                  <div class="el-input-group__prepend">所属部门</div>
                  <el-select v-model="modelForm.departmentId" filterable placeholder="请选择所属部门" size="medium" class="w-100p">
                    <el-option
                      v-for="item in departList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="el-input el-input-group el-input-group--prepend">
                  <div class="el-input-group__prepend">可管理门店</div>
                  <div class="check_data" v-if="branchData && branchData.length>0">
                    <div class="checkAll"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
                    <el-checkbox-group v-model="branchChecked" class="text-left" @change="handleCheckedCitiesChange">
                      <el-checkbox :label="i.id"  v-for="i in branchData" :key="i.id" :value="i.id" class="el_checkbox_br">{{i.name}}</el-checkbox> <br />
                    </el-checkbox-group>
                  </div>
                  <div class="check_data" v-else>暂无数据</div>
                </div>
              </el-form-item>
              <!--{ required: true, message: '所属岗位不能为空', trigger: 'blur' }-->
              <!--<el-form-item label=" " prop="ganweiId" :rules="[]">-->
                <!--<div class="el-input el-input-group el-input-group&#45;&#45;prepend">-->
                  <!--<div class="el-input-group__prepend">岗位</div>-->
                  <!--<el-select v-model="ganweiId" filterable placeholder="请选择所属岗位" size="medium" class="w-100p">-->
                    <!--<el-option-->
                      <!--v-for="item in ganweiList"-->
                      <!--:key="item.id"-->
                      <!--:label="item.name"-->
                      <!--:value="item.id">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</div>-->
              <!--</el-form-item>-->
            </el-form>
                        <div class="foot-bar-button">
                            <el-button type="primary" size="medium" @click="submitForm('modelForm')">提交</el-button>
                            <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
                        </div>
        </el-dialog>
    </div>
</template>
<script>
//注意路径
export default {
  props: ["isShow", "id"], //参数
  data() {
    return {
      modelForm: {
        gender:"MAN"
      },
      showDialog: false,
      activityId: "",
      isSave: true,
      settlemements: [],
      states: [],
      treeData:[],
      downCategeryId:[],
      departList:[],
      ganweiList:[],
      ganweiId:"",
      treeShow: false,
      branchData:[],//管理门店
      defaultChecked:[],//选中的门店
      isIndeterminate:true,
      checkAll:false,
      branchIds:[],
      branchChecked:[]


    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      this.checkAll=false;
      this.isIndeterminate=true;
      this.branchData = [];
        if (newValue) {
        if (this.id != "") {
          this.activityId = this.id;
          this.isSave = false;
          this.$axios
            .get("organization/employees/" + this.activityId + "/update")
            .then(data => {
              this.modelForm = data.content.employee;
              this.downCategeryId=[];
              var tree = data.content.districts;
              this.newLabel(tree);
              this.treeData = tree;
              this.downCategeryId = [];
              if (data.content.employee.districtName) {
                this.downCategeryId.push(data.content.employee.districtName + '');
              }
              this.downCategeryId.push(data.content.employee.districtId + '');
              if( this.downCategeryId.length>0){
                this.getDepart();
              }
              if(this.modelForm.attachDataPermission){
                this.branchChecked = JSON.parse(this.modelForm.attachDataPermission);
              }


            });
        } else {
          this.isSave = true;
          this.branchChecked=[];
          this.$axios.get("organization/employees/create").then(data => {
            data.content.employee.gender="MAN";
            this.modelForm = data.content.employee;
            this.downCategeryId=[];
            var tree = data.content.districts;
            this.newLabel(tree);
            this.treeData = tree;
            // this.states = data.content.states;
          });
        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    handleCheckAllChange(event){
      console.log(event)
      this.branchChecked = event ? this.branchIds : [];
      this.isIndeterminate = false;
//      if(!event.target.checked){
//        this.tableData = [];
//      }else {
//        this.getGoodList();
//      }
    },
    handleCheckedCitiesChange(value){
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.branchIds.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.branchData.length;
    },
    getDepart(){
      var item = 0;
      if(this.downCategeryId && this.downCategeryId.length>0){
        item=this.downCategeryId[this.downCategeryId.length-1];
      }
      if(!item){
        item=this.treeData[0].id;
      }
      this.$axios.get("organization/districts/getDepartment?id="+item).then(res=>{
        if(res.success){
          this.departList=[];
          this.departList=res.content.departmentList;
          console.log(res.content.branchList);
          this.branchData=res.content.branchList;

          console.log(this.branchData);

          if(this.branchData && this.branchData.length>0){
            for(let i=0;i<this.branchData.length;i++){
              this.branchIds.push(this.branchData[i].id);
            }
          }
          if(this.branchData && this.branchChecked){
            this.checkAll = this.branchData.length === this.branchChecked.length;
            this.isIndeterminate = this.branchChecked.length > 0 && this.branchChecked.length < this.branchData.length;
          }



        }
      },res=>{})
    },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          if (newList[i].children.length == 0) {
            newList[i].children = null;
          } else {
            for (var s = 0; s < newList[i].children.length; s++) {
              newList[i].children[s].label = newList[i].children[s].name;
              newList[i].children[s].value = newList[i].children[s].id + "";
              newList[i].children[s].children = null;
            }
          }
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.downCategeryId.length<=0){
            this.$message.error("请选择区域");
            return;
          }
          this.modelForm.districtId = this.downCategeryId[this.downCategeryId.length - 1];
          if (!this.modelForm.districtId) {
            this.modelForm.districtId = 0;
          }

          if(this.branchChecked && this.branchChecked.length>0){
            this.modelForm.attachDataPermission = JSON.stringify(this.branchChecked);
          }

          if(this.modelForm.account){
            delete this.modelForm.account;
          }

          console.log(this.modelForm);

//          return;
          if (this.isSave) {
            this.$axios
              .post("organization/employees/create", this.modelForm)
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          } else {
            this.modelForm._method = "PUT";
            this.$axios
              .put(
                "organization/employees/"+this.activityId +"/update",
                this.modelForm
              )
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("close");
      this.showDialog = false;
    },
    handleClose(done) {
      this.$emit("close");
      done();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    }
  }
};
</script>
<style scoped>
.el-input-group--append .el-input__inner,
.el-input-group__prepend {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.check_data{
  padding:20px;
  border:1px solid #dcdfe6;
}
.el_checkbox_br{
  margin: 2px 3px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap; width:80%;

}
  .checkAll{
    text-align: left;
  }
</style>
